<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h1 {
      /* 单词表示法 */
      /* color: violet; */


      /* red green blue */

      /* rgb(用百分比) */
      /* color: rgb(100%, 50%, 0%); */
      /*  */
      /* color: rgb(255, 128, 0); */

      /* 16进制表示法 */
      /* color: #ff8000; */

      /* rgba(透明度) */
      background: rgba(100%, 50%, 0%, 0.5);


      /*  */
      opacity: 0.5;

    }

    #div1 {
      /* 单行文本垂直居中小技巧（height = line-height ） */
      height: 50px;
      line-height: 50px;
      background: rgb(99, 78, 63);
      /* px,%(相对于父元素对应属性来计算) */
      /* width: 100px;
      height: 100px; */

      /*  */
      /* width: 50%;
      height: 50%; */

      /* 1em = 父元素的字体大小px */
      /* width: 10em; */

      /* 1rem = root（html）字体大小 px  */
      /* width: 10rem; */


      width: 10vw;
    }

    * {
      margin: 0;
    }

    body {
      /* text-align: center; */
      text-indent: 20px;
      font-size: 50px;
      border: 1px red solid;
    }

    #div2 {
      /* 1em = 50px */
      font-size: 20px;
      /* width: 10em; */
      width: 300px;
      /* min-width: 600px; */
      height: 100px;
      background: slateblue;

      /* 将内部的元素或内容从边上往里挤 */
      /* padding-left: 20px; */

      /* margin:将其他元素从自己身边推开 */
    }

    html {
      font-size: 30px;
    }

    #div3 {
      width: 300px;
      height: 300px;
      padding: 50px;
      /* border: 10px dotted red;
      border: green; */

      /* border-width: 10px;
      border-style: dotted; */


      /* background-color: #000; */
      margin: 20px;
      background: url(./图片.png) #ccc;
      background-repeat: no-repeat;
      /* background-image: url(./图片.png); */
      /* background-size: 100%; */
      /* background-position: center; */
    }

    #div4 {
      height: 200px;
      overflow: scroll;
    }
  </style>
</head>

<body>
  <!-- <h1>11111 <span>34567890</span></h1> -->
  <div id="div2">
    drtyujnbvfgtyujkjmn
    <div id="div1">123</div>
  </div>

  <div style="margin-top: 50px; background: red;">123456y7u</div>
  <span>123456t</span><span>12345678</span>
  <div id="div4">
    <div id="div3"></div>
  </div>
</body>

</html>